<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/second.css" />
		<link href="css/globle.css" rel="stylesheet">
		<link href="css/font.css" rel="stylesheet">
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
		<script src="js/anime.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
			
		</script>
	</head>

	<body>
<canvas class="bgFlash" id="bgFlash" style="z-index: 0;"></canvas>
		<img src="img/logo.png" style="position:absolute;margin-top: 30px;left: 1638px;z-index: 10;" />
		<div style="width: 3370px;height: 800px;margin: 0 auto;display: flex;">
			<div id="bg">
				<img src="img/组 86.png" class="bg el" style="z-index: 2;" />
				<img src="img/bg_center.png" class="bg" style="opacity: 1;z-index: 1;" />

			</div>
			<div id="xian">
				<img src="img/矩形 1373.png" class="x1" style="left: 2824px;top: 424px;opacity: 0;" />
				<img src="img/矩形 1374.png" class="x2" style="left: 990px;top: 390px;opacity: 0;" />
				<img src="img/矩形 1375.png" class="x3" style="left: 854px;top: 386px;opacity: 0;" />
				<img src="img/矩形 1373.png" class="x4" style="left: 2451px;top: 399px;" />
				<img src="img/矩形 1374.png" class="x5" style="left: 2318px;top: 430px;" />
				<img src="img/矩形 1375.png" class="x6" style="left: 1225px;top: 412px;" />
				<img src="img/矩形 1373.png" class="x7" style="left: 930px;top: 404px;opacity: 0;" />
				<img src="img/矩形 1374.png" class="x8" style="left: 2838px;top: 403px;opacity: 0;" />
				<img src="img/矩形 1375.png" class="x9" style="left: 2750px;top: 383px;opacity: 0;" />
				<img src="img/矩形 1373.png" class="x10" style="left: 1251px;top: 380px;" />
				<img src="img/矩形 1374.png" class="x11" style="left: 1203px;top: 398px;" />
				<img src="img/矩形 1375.png" class="x12" style="left: 2451px;top: 416px;" />
			</div>
			<div class="left-box">
				<div class="left-n1">
					<div class="bt1">交办信息排名</div>
					<p>单位：件</p>
					<div id="ech_n1_1" style="height: 100%;"></div>
				</div>
				<div class="left-n2" id="itemContainer">
					<div class="bt1">交办信息统计</div>
					<div id="ech_n1_2" style="height: 100%;margin-top: 50px;"></div>
					<!--<div class="ech">交办总数<br />
						<p>1693</p>
						<a>环比增长3%</a>
					</div>
					<div class="txt n1">一般·5个工作日<br />
						<a>94.3%</a><br />
						<p>1597</p>
					</div>
					<div class="txt n2">紧急·3个工作日<br />
						<a>3.4%</a><br />
						<p>58</p>
					</div>
					<div class="txt n3">延期·10个工作日<br />
						<a>2.3%</a><br />
						<p>38</p>
					</div>-->
				</div>
				<div class="left-n3">
					<div class="bt">实时信息</div>
					<img src="img/ss-bg.png" />
					<div class="box">
						<div class="scroll-body">
						<div class="tab-body">
							<div class="tab-body-n1">电0012201806200129</div>
							<div class="tab-body-n2">06-12 15:00</div>
							<div class="tab-body-n3">村务管理</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 yiban">一般（5工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0011201806200141</div>
							<div class="tab-body-n2">06-12 15:01</div>
							<div class="tab-body-n3">消费质量</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 jinji">紧急（3工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0009201806200038</div>
							<div class="tab-body-n2">06-12 15:03</div>
							<div class="tab-body-n3">劳动合同与劳动关系</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 yanqi">延期（10工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0037201806200129</div>
							<div class="tab-body-n2">06-12 15:04</div>
							<div class="tab-body-n3">残疾人管理</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 teji">特急（1工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0012201806200129</div>
							<div class="tab-body-n2">06-12 15:00</div>
							<div class="tab-body-n3">村务管理</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 yiban">一般（5工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0011201806200141</div>
							<div class="tab-body-n2">06-12 15:01</div>
							<div class="tab-body-n3">消费质量</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 jinji">紧急（3工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0009201806200038</div>
							<div class="tab-body-n2">06-12 15:03</div>
							<div class="tab-body-n3">劳动合同与劳动关系</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 yanqi">延期（10工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">电0037201806200129</div>
							<div class="tab-body-n2">06-12 15:04</div>
							<div class="tab-body-n3">残疾人管理</div>
							<div class="tab-body-n4">网络交办</div>
							<div class="tab-body-n5 teji">特急（1工作日）</div>
							<div class="tab-body-n6">已办结</div>
						</div>
						</div>
					</div>
				</div>
			</div>
			<div class="center-box">
				<img src="img/bt.png" class="center-bt" />
				<div id="ech_n1_3" style="height: 750px;margin-top: 50px;"></div>
				<div id="zbg">
					<img src="img/内部.png" class="bg el" />
					<img src="img/外部.png" class="bg2" />
					<img src="img/z-bg2.png" class="bg1 al" />
				</div>
			</div>
			<div class="right-box">
				<div class="right-n1">
					<div class="bt">市直部门效能指数</div>
					<img src="img/xn-bg.png" style="opacity: 0.4;" />
					<div class="box" id="itemContainer1">
					</div>
				</div>
				<div class="right-n2">
					<div class="bt1">区县市效能指数</div>
					<img src="img/xn-bg2.png" />
					<div id="ech_n1_4" style="height: 165px;margin-top: 130px;"></div>
					<div class="box">
						<div class="tab-body">
								189
								<a>件</a><br />
								<p>78.26</p>
						</div>
						<div class="tab-body">
								1267
								<a>件</a><br />
								<p>75.69</p>
						</div>
						<div class="tab-body">
								645
								<a>件</a><br />
								<p>75.60</p>
						</div>
						<div class="tab-body">
								543
								<a>件</a><br />
								<p>75.40</p>
						</div>
						<div class="tab-body">
								2099
								<a>件</a><br />
								<p>75.21</p>
						</div>
						<div class="tab-body">
								1246
								<a>件</a><br />
								<p>75.20</p>
						</div>
						<div class="tab-body">
								3846
								<a>件</a><br />
								<p>75.19</p>
						</div>
						<div class="tab-body">
								1687
								<a>件</a><br />
								<p>75.16</p>
						</div>
						<div class="tab-body">
								1838
								<a>件</a><br />
								<p>75.14</p>
						</div>
						<div class="tab-body">
								7349
								<a>件</a><br />
								<p>74.99</p>
						</div>
						<div class="tab-body">
								2490
								<a>件</a><br />
								<p>74.78</p>
						</div>
						<div class="tab-body">
								2222
								<a>件</a><br />
								<p>74.70</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			
							//交办信息统计
								$(document).ready(function() {
				$.ajax({
        url: "js/huan.json",
        type: "get",
    dataType: "json",  
        success:
					function(result) {
						if(result) {
					var data = result.Data;
					var Yiban = data.Yiban;
					var Jinji = data.Jinji;
					var Teji = data.Teji;
					var Yanqi = data.Yanqi;
					var TodayTotal = data.TodayTotal;
					var YesterdayTotal = data.YesterdayTotal;
					
					var huanbi = (TodayTotal-YesterdayTotal)/YesterdayTotal;
					var yb = Yiban/TodayTotal*100;
					var jj = Jinji/TodayTotal*100;
					var tj = Teji/TodayTotal*100;
					var yq = Yanqi/TodayTotal*100;
					var html = '';
if(huanbi>=0){
	html +=	'<div class="ech">交办总数<br /><p>'+TodayTotal+'</p><a>环比增长'+huanbi.toFixed(0)+'%</a></div><div class="txt n1">一般·5个工作日<br /><a>'+yb.toFixed(2)+'%</a><br /><p>'+Yiban+'</p></div><div class="txt n2">紧急·3个工作日<br /><a>'+jj.toFixed(2)+'%</a><br /><p>'+Jinji+'</p></div><div class="txt n3">延期·10个工作日<br /><a>'+yq.toFixed(2)+'%</a><br /><p>'+Yanqi+'</p></div>'
						;
}else{
	html +=	'<div class="ech">交办总数<br /><p>'+TodayTotal+'</p><a>环比减少'+Math.abs(huanbi.toFixed(0))+'%</a></div><div class="txt n1">一般·5个工作日<br /><a>'+yb.toFixed(2)+'%</a><br /><p>'+Yiban+'</p></div><div class="txt n2">紧急·3个工作日<br /><a>'+jj.toFixed(2)+'%</a><br /><p>'+Jinji+'</p></div><div class="txt n3">延期·10个工作日<br /><a>'+yq.toFixed(2)+'%</a><br /><p>'+Yanqi+'</p></div>'
						;
}
						
						

					$(html).appendTo('#itemContainer');
				}
					}
					});
			})
				
				//效能指数
					$(document).ready(function() {
				$.ajax({
        url: "复制(5)ajax.json",
        type: "get",
    dataType: "json",  
        success:
					function(result) {
						if(result) {	
					var data = result.Data;
					var color = ['red','yellow','green','blue','blue','blue','blue','blue','blue','blue']
					
//					var jindu = (TodayTotal-YesterdayTotal)/YesterdayTotal;
					var html = '';
					var max = []
					for (var i = 0; i < data.length - 1; i++) {
					    max = max < data[i+1].Total ? data[i+1].Total : max
					}
					var nummax = max+200
					for(var i = 0; i < data.length; i++) {
					var name = data[i].Type;
					var bili = data[i].baifenbi;
					var value = data[i].Total;
					var numbili = (value/nummax*100).toFixed(2);
	html +=	'<div class="tab-body"><div class="tab-body-n1">'+name+'</div><div class="tab-body-n2"><dl class="barbox"><dd class="barline"><div class="charts '+color[i]+'" style="width:'+numbili+'%;"><a style="padding-left: 135px;margin-top: -6px;">'+bili+'</a></div></dd></dl></div><div class="tab-body-n3">'+value+'<a>件</a></div></div>'
	;
	}
					
					$(html).appendTo('#itemContainer1');
				}
					}
					});
			})
					//进度条


	var amimeat=function(){
		$(".charts").each(function(i,item){
			var wi=$(this).attr("w");
			$(item).animate({width: wi+"%"},1000,function(){//一天内走完
				$(this).children('d').html(wi+"");
			});
		});
	}


				$(document).ready(function(){
		$(".charts").each(function(i,item){
				$(this).children('d').html(1+"");
		});
	})
		
			$(".left-n3 .box").myScroll();
				
				
			var bg = anime({
				targets: '#bg .el',
				opacity: {
					value: 1,
					duration: 2000,
					easing: 'easeInOutQuad'
				},
				direction: 'alternate',
				loop: true
			});
			var zbg = anime({
				targets: '#zbg .el',
				rotate: {
					value: 360,
					duration: 30000,
					easing: 'easeInOutQuad'
				},
			});
			var zbg = anime({
				targets: '#zbg .al',
				rotate: {
					value: -360,
					duration: 40000,
					easing: 'easeInOutQuad'
				},
			});
			var xian = anime.timeline({
				duration: 2000,
				direction: 'alternate',
				loop: true
			});
			xian.add({
					targets: '#xian .x1',
					translateX: -500,
					offset: 0,
					opacity: 1,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x2',
					translateX: 250,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x3',
					translateX: 500,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x4',
					translateX: 250,
					offset: 0,
					opacity: 0,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x5',
					translateX: 500,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x6',
					translateX: -500,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x7',
					translateX: 500,
					offset: 0,
					opacity: 1,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x8',
					translateX: -250,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x9',
					translateX: -500,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x10',
					translateX: -250,
					offset: 0,
					opacity: 0,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x11',
					translateX: -250,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x12',
					translateX: 500,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})

			ech_n1_1();
			ech_n1_2();
			ech_n1_3();
			ech_n1_4();
		</script>
	</body>

</html>